<template>
  <div class="logcontainer">
    <!-- 装饰性背景元素 -->
    <div class="decoration-bg">
      <img src="@/assets/icons/login-decoration.svg" alt="decoration" class="decoration-svg" />
    </div>

    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <div class="inforegion">
          <div class="header">
            <div class="security-icon">
              <img src="@/assets/icons/security.svg" alt="security" />
            </div>
            <h2>{{ sysHello }}</h2>
          </div>
          <div class="form">
            <el-form :model="userInfo" :rules="rules" ref="loginForm">
              <el-form-item label="账号" prop="username">
                <el-input v-model="userInfo.username" prefix-icon="User" />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="userInfo.password" prefix-icon="Lock" show-password />
              </el-form-item>
              <el-form-item>
                <BaseButton type="primary" @click="onSubmit" :loading="loading">登录</BaseButton>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import successIcon from '@/assets/icons/success.svg'
import { useUserStore } from '@/stores'
import { getCurrentTime } from '@/utils/time'
import type { FormInstance, FormRules } from 'element-plus'
import { ElNotification, } from 'element-plus'
import { h, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const sysHello = import.meta.env.VITE_APP__HELLO
const loading = ref(false)
const userStore = useUserStore()
const loginForm = ref<FormInstance>()
const userInfo = reactive({
  username: 'admin',
  password: '123456',
})

const validateusername = (rule: unknown, value: string, callback: (error?: string | Error) => void) => {

  if (!value || value.trim() === '') {
    return callback(new Error('请输入账号'))
  }

  //校验通过
  callback()
}
const rules = reactive<FormRules>({
  username: [
    { min: 5, max: 10, message: '账号长度必须在 5 到 10 个字符之间', trigger: 'blur' },
    { validator: validateusername, trigger: 'blur' },
  ],
  password: [{ min: 6, max: 12, message: '密码长度必须在 6 到 12 个字符之间', trigger: 'blur' }],
})
// 处理登录表单提交

const onSubmit = async () => {
  await loginForm.value?.validate()
  loading.value = true
  try {
    await userStore.login(userInfo)
    // 登录成功后，获取重定向地址，默认跳转到首页
    const redirect = route.query.redirect as string || '/'
    await router.push(redirect)

    loading.value = false
    ElNotification({
      title: sysHello,
      message: `当前时间 ${getCurrentTime()}`,
      icon: h('img', { src: successIcon, style: 'width: 20px; height: 20px;' }),
      duration: 2000,
      offset: 50
    })
  } catch {
    loading.value = false
  }
}

</script>

<style scoped lang="scss">
/**
 * 登录页面样式
 * 包含响应式设计、现代化卡片效果、渐变背景和动画效果
 */
.logcontainer {
  min-height: 100vh;
  background: linear-gradient(135deg, $login-color-primary 0%, $login-color-secondary 100%);
  background-image: url('@/assets/images/login_background.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  display: flex;
  align-items: center;

  // 添加遮罩层增强可读性
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, $login-overlay-bg 0%, $login-overlay-bg-secondary 100%);
    z-index: 1;
  }

  // 装饰性背景元素
  .decoration-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;

    .decoration-svg {
      position: absolute;
      top: 10%;
      left: 5%;
      width: 400px;
      height: 400px;
      opacity: 1; // 增加透明度使其更可见
      animation: float 6s ease-in-out infinite;

      @media (max-width: 768px) {
        width: 300px;
        height: 300px;
        top: 5%;
        left: -10%;
      }
    }
  }

  .el-row {
    width: 100%;
    position: relative;
    z-index: 2;
  }

  .inforegion {
    padding: 60px 40px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 20px 40px $login-card-shadow;
    margin: 20px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    animation: slideInRight 0.8s ease-out;
    border: 1px solid $login-card-border;

    // 响应式设计
    @media (max-width: 768px) {
      margin: 20px auto;
      padding: 40px 30px;
      border-radius: 15px;
      max-width: 90%;
      width: 90%;
    }

    @media (max-width: 480px) {
      padding: 30px 20px;
      margin: 15px auto;
      max-width: 95%;
      width: 95%;
      border-radius: 12px;
    }
  }

  .header {
    margin-bottom: 20px;

    .security-icon {
      text-align: center;
      margin-bottom: 16px;

      img {
        width: 40px;
        height: 40px;
        animation: fadeInDown 1s ease-out both;
        filter: drop-shadow(0 2px 6px $login-color-shadow);
      }
    }


    h2 {
      font-size: 20px;
      background: linear-gradient(135deg, $login-color-primary, $login-color-secondary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin: 10px 10px 30px 0;
      font-weight: 700;
      animation: fadeInDown 1s ease-out 0.4s both;
      text-align: left;

      @media (max-width: 480px) {
        font-size: 22px;
        margin-bottom: 20px;
      }
    }
  }

  .form {
    animation: fadeInUp 1s ease-out 0.6s both;

    :deep(.el-form-item) {
      margin-bottom: 20px;

      .el-form-item__label {
        color: $login-color-text;
        font-weight: 500;
        font-size: 15px;
        line-height: 40px; // 与input的min-height保持一致
        margin-bottom: 6px;
        display: block;
        text-align: left;
        padding: 6px 12px 0px 0px; // 移除padding
        height: 40px; // 设置固定高度与input一致
        min-height: 40px;
      }

      .el-input {
        .el-input__wrapper {
          border-radius: 10px;
          box-shadow: 0 1px 3px $login-input-shadow;
          border: 1px solid $login-color-border;
          transition: all 0.3s ease;
          padding: 10px 12px;
          min-height: 40px;

          &:hover {
            box-shadow: 0 2px 6px $login-input-shadow-focus;
            border-color: $login-color-border-focus;
          }

          &.is-focus {
            box-shadow: 0 0 0 3px $login-input-shadow-focus-ring;
            border-color: $login-color-border-focus;
          }

          .el-input__inner {
            font-size: 14px;
            color: $login-color-text;
            line-height: 1.5;

            &::placeholder {
              color: $login-color-text-placeholder;
            }
          }

          .el-input__prefix-inner {
            color: $login-color-primary;
            margin-right: 8px;
          }
        }
      }
    }

    .el-button {
      width: 100%;
      height: 44px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      background: linear-gradient(135deg, $login-color-primary, $login-color-secondary);
      border: none;
      box-shadow: 0 2px 8px $login-button-shadow;
      transition: all 0.3s ease;
      margin-top: 20px;

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px $login-button-shadow-hover;
        background: linear-gradient(135deg, $login-color-primary-hover, $login-color-secondary-hover);
      }

      &:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px $login-decoration-shadow;
      }
    }
  }
}

// 动画定义
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 左侧装饰区域（在大屏幕上显示）
@media (min-width: 768px) {
  .logcontainer {
    .el-col:first-child {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, $login-decoration-bg 0%, transparent 70%);
        border-radius: 50%;
        animation: pulse 3s ease-in-out infinite;
      }
    }
  }
}

@keyframes pulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.3;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-10px) rotate(1deg);
  }

  66% {
    transform: translateY(5px) rotate(-1deg);
  }
}

//夜间模式
@media (prefers-color-scheme: dark) {
  .logcontainer {
    // 深色模式下的背景渐变调整
    // background: linear-gradient(135deg, #1a1a2e 0%, #16213e 10%);

    // 添加深色遮罩层
    &::before {
      background: linear-gradient(135deg, rgba(26, 26, 46, 0.6) 0%, rgba(22, 33, 62, 0.6) 1%);
    }

    .inforegion {
      background: rgba(255, 255, 255, 0.2);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    }

    .form {
      :deep(.el-form-item) {
        .el-form-item__label {
          color: $text-color-primary-dark;
        }

        .el-input {
          .el-input__wrapper {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);

            .el-input__inner {
              color: $text-color-primary-dark;

              &::placeholder {
                color: rgba(229, 231, 235, 0.5);
              }
            }
          }
        }
      }
    }

    h2 {
      color: $text-color-primary-dark;
    }
  }
}
</style>
